<template>
    <div>
        <input type="text" v-model="obj.first"/>
        <select v-model="obj.opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="obj.second"/>
        <input type="button" value="=" />
        <input type="text" v-model="result"/>
        <button @click="changeData">修改数据</button>

        <button @click="goBack">返回</button>
    </div>
</template>

<script setup lang="ts">
    import {computed,watch,reactive} from "vue"
    console.log(history.state.id);

    import { useRouter } from "vue-router";
    const router = useRouter()
    function goBack(){
        //返回上一个路由页面
        router.go(-2)
    }

    const obj = reactive({
        first:"",
        second:"",
        opt:""
    })

    // computed:计算属性
    //只要计算属性中的响应式数据发生改变，那么它就会重新运算
     const result = computed(()=>{
        if(obj.first!=""&&obj.second!=""){
             return eval(obj.first + obj.opt +obj.second)
        }
    })

    //watch:监听属性
    //主要用于监听数据、路由的变化
    //监听一个数据
    // watch(obj,(value)=>{
    //     console.log("obj:",value);
        
    // })

    //监听多个数据
    // watch([() => obj.first,() => obj.opt,() => obj.second],(values)=>{
    //     console.log("objs:",values);
    // })

    //深度监听:监听深层次结构的数据
    const objDeep = reactive({
        user:{
            name:"张三",
            age:20
        }
    })

    function changeData(){
        objDeep.user.name="老六"
    }
    //监听默认是被动监听
    watch(() => objDeep.user,(deepValue)=>{
        console.log("objDeep:",deepValue);
    },{
        deep:true, //开启深层次结构监听,默认为false
        immediate:true //开启初始化监听，默认为false
    })
</script>

<style scoped>

</style>